<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    *{margin: 0; padding: 0;}
    html,body{height: 100%; margin: 0; padding: 0;
        font: 12px/1.5 tahoma, arial, 'hiragino sans gb', 'microsoft yahei', sans-serif;
        -webkit-font-smoothing: antialiased;}
    #mian{ width:100%; height:99%;}
    .mian{ width:49%; height:100%; float:left;}
    .leftBox {background:#ecf0f5;width:35px; height:100%; text-align:left; float: left;}
    .test{border:1px solid #eaeaea; outline:none; width:600px; height:100%; resize: none; background: rgb(250,250,250); line-height: 24px;font-size: 14px;float: left; padding:10px 8px;  color: black; font-family: inherit; box-sizing: border-box;}
    .leftNum{ height:100%; width: 100%; resize: none;outline:none; overflow-y: hidden; overflow-x: hidden; border: 0; background: rgb(247,247,247); color: #999;line-height: 24px;font-size: 14px; padding:10px 4px; text-align: right; font-weight: bold; box-sizing: border-box;}
</style>
<body>
<div id="mian">
    <div class="mian">
        <div id="leftBox" class="leftBox"><textarea wrap="off" cols="2" id="leftNum" class="leftNum"  disabled></textarea></div>
        <textarea id="test"   class="test"  name="content" oninput="keyUp1()" onscroll="getId('leftNum').scrollTop = this.scrollTop;">
    </textarea>
    </div>
    <div  class="mian">
        <div id="leftBox1" class="leftBox"><textarea wrap="off" cols="2" id="leftNum1" class="leftNum"  disabled></textarea></div>
        <textarea id="test1" class="test" name="content" onkeydown="clikeyxxx()" oninput="keyUp1(this)" onscroll="getId('leftNum').scrollTop = this.scrollTop;">
    </textarea>
    </div>
</div>
<script type="text/javascript">
    var num = "";
    var btn = getId('btn');
    var test = getId('test');
    function getId(obj) {
        return document.getElementById(obj);
    }

    function clikeyxxx(e) {
        var e = e || window.event;  //标准化事件对象
        var t = e.target || e.srcElement;  //获取发生事件的元素，兼容IE和DOM
    }
    function keyUp1(e){
        var e = e || window.event;  //标准化事件对象
        var t = e.target || e.srcElement;  //获取发生事件的元素，兼容IE和DOM
        var str = test.value;
        str = str.replace(/\r/gi,"");
        str = str.split("\n");
        n = str.length;
        line(n);
    }
    function keyUp(){
        var str = test.value;
        str = str.replace(/\r/gi,"");
        str = str.split("\n");
        n = str.length;
        line(n);
    }
    function line(n){
        var lineobj = getId("leftNum");
        console.log(n)
         n= n==1?n:n++;
        for(var i = 1;i <= n;i ++){
            if(document.all){
                num += i + "\r\n";//判断浏览器是否是IE
            }else{
                num += i + "\n";
            }
        }
        lineobj.value = num;
        num = "";
    }
    //ctrl 是dom节点
    function getCursortPosition (ctrl)
    {
        //获取光标位置函数
        var CaretPos = 0;
        // IE Support
        if (document.selection)
        {
            ctrl.focus (); // 获取焦点
            var Sel = document.selection.createRange (); // 创建选定区域
            Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置
            CaretPos = Sel.text.length;                      // 获取当前选定区的文本内容长度
        }
        // Firefox support (非ie)
        else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        {
            CaretPos =ctrl.selectionStart; // 获取选定区的开始点
        }
        return CaretPos;
    }
    //ctrl 是dom节点，pos 是要定位到的位置
    function setCaretPosition(ctrl, pos)
    {
        //设置光标位置函数
        if(ctrl.setSelectionRange)   //非ie
        {
            ctrl.focus();  // 获取焦点
            ctrl.setSelectionRange(pos,pos);  // 设置选定区的开始和结束点
        }
        else if (ctrl.createTextRange)
        {
            var range = ctrl.createTextRange();  // 创建选定区
            range.collapse(true);                // 设置为折叠,即光标起点和结束点重叠在一起
            range.moveEnd('character', pos);     // 移动结束点
            range.moveStart('character', pos);   // 移动开始点
            range.select();                      // 选定当前区域
        }
    }
    (function() {
        keyUp();
    })();
</script>
</body>
</html>